<template>
    <el-popover
        placement="right"
        trigger="click"
    >
        <el-table v-if="typeVal === 'num'"
            :data="historyTableData"
            key="num"
        >
            <el-table-column
                width="100"
                property="gmtModified"
                label="核准人"
            ></el-table-column>
            <el-table-column
                width="100"
                property="newValue"
                label="核准时间"
            ></el-table-column>
            <el-table-column
                width="120"
                property="oriValue"
                label="原数量"
            ></el-table-column>
            <el-table-column
                width="120"
                property="oriValue"
                label="核准数量"
            ></el-table-column>
            <el-table-column
                width="100"
                property="modifiedName"
                label="审核人"
            ></el-table-column>
        </el-table>
        <el-table v-else
            :data="historyTableData"
            key="amount"
        >
            <el-table-column
                width="100"
                property="gmtModified"
                label="核准人"
            ></el-table-column>
            <el-table-column
                width="100"
                property="newValue"
                label="核准时间"
            ></el-table-column>
            <el-table-column
                width="120"
                property="oriValue"
                label="原金额"
            ></el-table-column>
            <el-table-column
                width="120"
                property="oriValue"
                label="核准金额"
            ></el-table-column>
            <el-table-column
                width="100"
                property="modifiedName"
                label="审核人"
            ></el-table-column>
        </el-table>
        <img
            @click="clickIcon"
            slot="reference"
            src="@/assets/icon_history.png"
        />
    </el-popover>
</template>

<script>
import { mapState } from 'vuex'
export default {
    props: {
        typeVal: {
            type: String,
            default: 'amount' // amount 金额, num 数量
        }
    },
    computed: {
        ...mapState(['historyTableData'])
    },
    data () {
        return{

        }
    },
    methods: {
        clickIcon () {
            this.$emit('clickIcon')
        }
    }
}
</script>

<style lang="scss" scoped>
    img{
        margin-left: 15px;
        width: 24px;
        height: 24px;
    }
</style>